<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Form Test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" />
    <link rel="stylesheet" href="theme-default.css" />
    <style>

        /* Form and inputs */
        form {
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            display: block;
        }

        input.form-control {
            width: 375px;
        }

        button, input[type="submit"], .button {
            margin-bottom: 8px;
        }


        /* modify inputs for password strength */
        .password-strength input.form-control {
            width: 375px;
            margin-right: 4px;
            display: inline;
        }

        .password-strength label {
            display: block;
        }

        /* Checkboxes */
        .form-group.check-boxes input {
            margin-left: 10px;
        }

        /* Error container for form C */

        #error-container div {
            color: red;
            line-height: 140%;
        }

        #error-container div:last-child {
            padding-bottom: 10px;
        }

    </style>
</head>
<body>
<div>
    <form action="" id="form-a" role="form">
        <div class="form-group">
            <label class="control-label" for="inline-suggestions">Inline suggestions</label>
            <input name="inline suggestions" type="text" id="inline-suggestions" class="form-control" data-suggestions="Monkey, Horse, Hound, Fox, Tiger, Elephant" />
        </div>

        <div class="form-group">
            <label class="control-label" for="country-suggestions">Country suggestions</label>
            <input name="country suggestions" data-validation="country" type="text" id="country-suggestions" class="form-control" />
        </div>

        <div class="form-group">
            <label class="control-label" for="country-suggestions">Swedish county suggestions</label>
            <div>
                <div>
                    <!-- Make sure error class "has-error" gets all the way up to .form-group -->
                    <input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" />
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Year</label>
            <input name="birth" class="form-control"
                   data-validation="length date"
                   data-validation-length="min5"
                   data-validation-format="yyyy/mm/dd"
                   data-suggestions="2014/01/15,2014/01/16,2014/01/17" />
        </div>

        <div class="form-group">
            <label class="control-label">Datepicker</label>
            <input name="birth2" class="form-control"
                   data-validation="date"
                   data-validation-format="mm/dd/yyyy"
                   id="datepicker" />
        </div>

        <div class="form-group">
            <label class="control-label">Number 0-10 (accepting floats with comma)</label>
            <input name="floats" class="form-control"
                   data-validation="number"
                   data-validation-allowing="range[0;10], float"
                   data-validation-decimal-separator=","
                    />
        </div>

        <div class="form-group password-strength">
            <label class="control-label" for="password">Display password strength (only strong)</label>
            <input name="password" type="password" id="password" class="form-control" data-validation="strength" data-validation-strength="3" />
        </div>

        <div class="form-group">
            <label class="control-label">Alphanumeric and -_ and spaces</label>
            <input name="alphanumeric with spaces" class="form-control" name="test" data-validation="alphanumeric" data-validation-allowing="-_ " />
        </div>

        <div class="form-group">
            <label class="control-label">Alphanumeric only</label>
            <input name="aplhanumeric only" class="form-control" name="test2" data-validation="alphanumeric" />
        </div>

        <div class="checkbox form-group">
            <label>
                <input name="checkbox" type="checkbox" data-validation="required" /> Must be checked
            </label>
        </div>

        <div class="form-group">
            <label class="control-label">Must choose one</label>
            <br />
            <input name="radio" type="radio" data-validation="required" value="1" /> A
            <input name="radio" type="radio" value="1" /> B
            <input name="radio" type="radio" value="1" /> C
            <input name="radio" type="radio" value="1" /> D
        </div>

        <div class="form-group">
            <label class="control-label">Even numbers only</label>
            <input name="even numbers" class="form-control" name="test4" data-validation="even_number" />
        </div>

        <div class="form-group">
            <label class="control-label">Make a choice</label>
            <br />
            <select name="choice" data-validation="required" data-validation-error-msg="Please make a choice">
                <option value="">- - Choose - -</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
                <option>D</option>
            </select>
        </div>

        <div class="form-group">
            <label class="control-label">Text</label>
            (<span id="max-len">20</span> chars left)<br />
            <textarea id="text-area" class="form-control" name="some-text"></textarea>
        </div>
        <div class="form-group">
            <label class="control-label">Server validation</label>
            <input class="form-control" name="code" value="secret"
                   data-validation-helssp="The word is &quot;secret&quot;"
                   data-validation="length server"
                   data-validation-length="min2"
                   data-validation-url="http://formvalidator.net/validate-email.php" />
        </div>
        <div class="form-group">
            <label class="control-label">File validation</label>
            <input type="file" name="some-file1" class="form-control"
                   data-validation="size mime required dimension"
                   data-validation-error-msg-size="The file cant be larger than 400kb"
                   data-validation-error-msg="You must upload an image file (max 400 kb)"
                   data-validation-allowing="jpg, png, ico"
                   data-validation-dimension="100-800"
                   data-validation-ratio="8:10-12:10"
                   data-validation-max-size="400kb" />
        </div>
        <div class="form-group">
            <label class="control-label">File name</label>
            <input type="text" name="some-file2" class="form-control"
                   data-validation="extension required"
                   data-validation-error-msg="You must write a file name with extension jpg|png|ico"
                   data-validation-allowing="jpg, png, ico"
                    />
        </div>
        <div class="form-group">
            <label class="control-label">
                Callback validation, set this value to &quot;1&quot; and
                validation will fail
            </label>
            <input id="callback" class="form-control" />
        </div>

        <div class="form-group check-boxes">
            <label>Checkbox group</label><br />
            <label>
                <input type="checkbox" name="box" value="1"
                       data-validation="checkbox_group"
                       data-validation-qty="1-2" /> 1
            </label>
            <label>
                <input type="checkbox" name="box" value="2" /> 2
            </label>
            <label>
                <input type="checkbox" name="box" value="3" /> 3
            </label>
            <label>
                <input type="checkbox" name="box" value="4" /> 4
            </label>
            <label>
                <input type="checkbox" name="box" value="5" /> 5
            </label>
        </div>

        <p style="line-height: 200%">
            <input type="submit" class="button">
            <br />
            <button class="button" type="button"
                    onclick="alert('Form a is ' + ( $('#form-a').isValid({}, {}, false) ? 'VALID':'NOT VALID'));">
                Test validation via js (<strong>without error messages</strong>)
            </button>
            <br />
            <button class="button" type="button"
                    onclick="alert('Form a is ' + ( $('#form-a').isValid() ? 'VALID':'NOT VALID'));">
                Test validation via js (showing error messages)
            </button>
            <br />
            <input type="reset" class="button">
        </p>
    </form>
    <hr />
    <form id="form-b">
        <div class="form-group">
            <label class="control-label">Test</label>
            <input name="test" data-validation="number" type="text" />
        </div>
        <div class="form-group">
            <label class="control-label">Password</label>
            <input name="pass" data-validation="confirmation" type="password" />
        </div>
        <div class="form-group">
            <label class="control-label">Password again</label>
            <input name="pass_confirmation" type="password" />
        </div>
        <p>
            <input type="submit" class="button">
            <input type="reset" class="button">
        </p>
    </form>
    <hr />
    <form id="form-c">
        <div class="form-group">
            <label class="control-label">Country</label>
            <input name="test" data-validation="country" data-validation-error-msg="No valid country given" />
        </div>
        <div class="form-group">
            <label class="control-label">E-mail</label>
            <input name="testmail" data-validation="email" data-validation-error-msg="E-mail is not valid" />
        </div>
        <div class="form-group">
            <label class="control-label">Confirm e-mail</label>
            <input name="test" data-validation="confirmation" data-validation-confirm="testmail" />
        </div>
        <div class="form-group">
            <label class="control-label">Alphanumeric (will only be validated if the checkbox is checked)</label>
            <input name="test2"
                    data-validation="alphanumeric"
                    data-validation-error-msg="Invalid..."
                    data-validation-if-checked="checker" />
            <br />
            <input type="checkbox" name="checker" />
        </div>
        <div id="error-container">

        </div>
        <p>
            <input type="submit" class="button">
            <input type="reset" class="button">
        </p>
    </form>
    <hr />
    <form id="form-d">
        <h2>HTML5 attributes</h2>
        <div class="form-group">
            <label class="control-label">type="email"</label>
            <input type="email" required="required" list="da-mejl" />
            <datalist id="da-mejl">
                <option value="Test">Test</option>
                <option value="test2">test2</option>
                <option value="test3">test3</option>
            </datalist>
        </div>
        <div class="form-group">
            <label class="control-label">type="url" (optional)</label>
            <input type="url" />
        </div>
        <div class="form-group">
            <label class="control-label">type="number"</label>
            <input type="number" required="required" />
        </div>
        <div class="form-group">
            <label class="control-label">type="number"</label>
            <input type="number" required="required" maxlength="30" />
        </div>
        <div class="form-group">
            <label class="control-label">type="number" range[-5;5]</label>
            <input type="number" min="-5" max="5" required="required" />
        </div>
        <div class="form-group">
            <label class="control-label">pattern="^([a-z]+)$"</label>
            <input type="text" name="some-colorz" list="some-colorz" pattern="^([a-z]+)$" required="required" />
            <datalist id="some-colorz" style="display: none">
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
                <option value="Red">Red</option>
                <option value="Black">Black</option>
                <option value="White">White</option>
            </datalist>
        </div>
        <p>
            <input type="submit" class="button">
            <input type="reset" class="button">
        </p>
    </form>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="jquery.form-validator.js"></script>
<script>
(function($, window) {

    var dev = '.dev'; //window.location.hash.indexOf('dev') > -1 ? '.dev' : '';

    // setup datepicker
    $("#datepicker").datepicker();

    // Add a new validator
    $.formUtils.addValidator({
        name : 'even_number',
        validatorFunction : function(value, $el, config, language, $form) {
            return parseInt(value, 10) % 2 === 0;
        },
        borderColorOnError : '',
        errorMessage : 'You have to give an even number',
        errorMessageKey: 'badEvenNumber'
    });

    window.applyValidation = function(validateOnBlur, forms, messagePosition, xtraModule) {
        if( !forms )
            forms = 'form';
        if( !messagePosition )
            messagePosition = 'top';

        $.validate({
            form : forms,
            language : {
                requiredFields: 'Du måste bocka för denna'
            },
            validateOnBlur : validateOnBlur,
            errorMessagePosition : messagePosition,
            scrollToTopOnError : true,
            lang : 'sv',
            sanitizeAll : 'trim', // only used on form C
           // borderColorOnError : 'purple',
            modules : 'security'+dev+', location'+dev+', sweden'+dev+', file'+dev+', uk'+dev +( xtraModule ? ','+xtraModule:''),
            onModulesLoaded: function() {
                $('#country-suggestions').suggestCountry();
                $('#swedish-county-suggestions').suggestSwedishCounty();
                $('#password').displayPasswordStrength();
            },
            onValidate : function($f) {

                console.log('about to validate form '+$f.attr('id'));

                var $callbackInput = $('#callback');
                if( $callbackInput.val() == 1 ) {
                    return {
                        element : $callbackInput,
                        message : 'This validation was made in a callback'
                    };
                }
            },
            onError : function($form) {
                alert('Invalid '+$form.attr('id'));
            },
            onSuccess : function($form) {
                alert('Valid '+$form.attr('id'));
                return false;
            }
        });
    };

    $('#text-area').restrictLength($('#max-len'));

    window.applyValidation(true, '#form-a', 'top');
    window.applyValidation(false, '#form-b', 'element');
    window.applyValidation(true, '#form-c', $('#error-container'), 'sanitize'+dev);
    window.applyValidation(true, '#form-d', 'element', 'html5'+dev);

    // Load one module outside $.validate() even though you do not have to
    $.formUtils.loadModules('date'+dev+'.js', false, false);

    $('input')
        .on('beforeValidation', function() {
            console.log('About to validate input "'+this.name+'"');
        })
        .on('validation', function(evt, isValid) {
            var validationResult = '';
            if( isValid === null ) {
                validationResult = 'not validated';
            } else if( isValid ) {
                validationResult = 'VALID';
            } else {
                validationResult = 'INVALID';
            }
            console.log('Input '+this.name+' is '+validationResult);
        });

})(jQuery, window);
</script>
</body>
</html>